<template>
	<div class="setings" id="setings">
		<div class="st_t1">
			安全设置
		</div>

		<div class="st_d1">
			<ul class="setting_ul">
				<li class="ul_title">
					<img src="./imgs/user_safe.png" />
					<div class="d_l">
						<span>
							<p>向俊峰</p>
							<p>ip3232323</p>
						</span>
						<span class="p_r">
							<label>2</label><label>/</label><label>5</label>
						</span>
					</div>
				</li>

				<li>
					<div class="icon"><img src="./imgs/security_phone.png" /></div>
					<div>
						<span>
							手机绑定
						</span>
					</div>
					<div>
						<span>
							已绑定
						</span>
					</div>
					<div>
						<span>您绑定的手机是 1**********</span>
					</div>
					<div class="operation">
						<button>
							修改
						</button>
					</div>
				</li>
				<li>
					<div class="icon"><img src="./imgs/security_email0.png" /></div>
					<div>
						<span>
							手机绑定
						</span>
					</div>
					<div>
						<span>
							已绑定
						</span>
					</div>
					<div>
						<span>您绑定的手机是 1**********</span>
					</div>
					<div class="operation">
						<button>
							修改
						</button>
					</div>
				</li>
				<li>
					<div class="icon"><img src="./imgs/security_google0.png" /></div>
					<div>
						<span>
							手机绑定
						</span>
					</div>
					<div>
						<span>
							已绑定
						</span>
					</div>
					<div>
						<span>您绑定的手机是 1**********</span>
					</div>
					<div class="operation">
						<button>
							修改
						</button>
					</div>
				</li>
				<li>
					<div class="icon"><img src="./imgs/security_password.png" /></div>
					<div>
						<span>
							手机绑定
						</span>
					</div>
					<div>
						<span>
							已绑定
						</span>
					</div>
					<div>
						<span>您绑定的手机是 1**********</span>
					</div>
					<div class="operation">
						<button>
							修改
						</button>
					</div>
				</li>
				<li>
					<div class="icon"><img src="./imgs/security_funding0.png" /></div>
					<div>
						<span>
							手机绑定
						</span>
					</div>
					<div>
						<span>
							已绑定
						</span>
					</div>
					<div>
						<span>您绑定的手机是 1**********</span>
					</div>
					<div class="operation">
						<button>
							修改
						</button>
					</div>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'setings',
		computed: {},
		data() {
			return {
				title: '',
			}
		}, //定义变量
		components: {}, //注册组件
		methods: { //方法都在这里
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.setings {
		text-align: left;
		.st_t1 {
			padding: 15px 20px;
			background: #f4f4f4;
			width: 100%;
			text-align: left;
			font-size: 24px;
		}
		.st_d1 {
			overflow: auto;
		}
		.setting_ul {
			overflow: auto;
			.ul_title {
				border: none;
				img {
					float: left;
					padding: 20px 20px 0px 0px;
				}
				span {
					display: inline-block;
				}
				.d_l {
					border-bottom: 2px solid #ededed;
					margin-left: 95px;
					padding-bottom: 8px;
					margin-top: 23px;
					display: block;
					p {
						line-height: 30px;
						height: 30px;
					}
					.p_r {
						float: right;
						line-height: 70px;
						height: 70px;
					}
				}
			}
			.ul_title:hover{
				border: none;
			}
			li {
				font-size: 14px;
				overflow: auto;
				border: 1px solid #ededed;
				display: table;
				height: 100px;
				width: 100%;
				margin-bottom: 20px;
				>div {
					display: table-cell;
					vertical-align: middle;
				}
				.icon {
					padding-left: 40px;
					width: 175px;
					>img {
						width: 60px;
					}
				}
				.operation {
					padding-right: 20px;
					text-align: right;
					button {
						width: 82px;
						background-color: #0093f1;
						height: 37px;
						border: none;
						color: white;
						font-size: 14px;
					}
					;
				}
			}
			li:hover{
				border: 1px solid #0093f1;
			}
		}
	}
</style>